<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<%@page import="problemDomain.PatronAccountBean"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Test Patron Login</title>
	
	<style type="text/css">
	
	.alignRight {
		text-align: right;
	}
	
	div.uiButton {
		width: 70px;
		height: 24px;
		display: inline-table;
		
		text-align: center;
		
		background-color: silver;
		border: 1px solid white;
		outline: 1px solid black;
	}
	
	div.uiButton:hover {
		background-color: gray;
		cursor: pointer;
	}
	
	table.loginTable {
		border: 2px solid navy;
		padding: 2px;
	}
	
	table.loginTable td {
		padding: 2px;
	}
	
	#loginUsername, #loginPassword {
		width: 100px;
	}
	
	</style>
	
	<script type="text/javascript" src="ajax-handler.js"></script>
	<script type="text/javascript">

	/* Common */

	var SERVLET_PATH = '/ordrs/external/login';

	/* END Common */
	
	function doLogin () {
		var username = document.getElementById('loginUsername').value;
		var password = document.getElementById('loginPassword').value;
		var message = document.getElementById('loginMessage');
		
		if (loginValidate(username, password, message))
			loginSend(username, password, message);
	}

	function loginValidate (username, password, message) {
		if (username == '' || password == '') {
			message.value = 'Enter your username and password';
			return false;
		}
		message.value = '';
		return true;
	}
	
	function loginSend (username, password, message) {
		var url = SERVLET_PATH;
		var params = 'username=' + encodeURI(username) +
		            '&password=' + encodeURI(password);
		
		var req = getXmlHttpObject();
		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				if (req.status == 200) {
					//returned code
					loginReceive(req.responseXML, message);
				} else if (req.status == 204) {
					//can't find server
					loginReceive(encodeErrorXML('-1', 'Cannot find server.'), message);
				}
			}
		};
		sendPost(req, url, params);
	}

	function loginReceive (xml, messageBox) {
		if (xml.getElementsByTagName('patron').length > 0) {
			var patron = xml.getElementsByTagName('patron')[0];
			var firstname = patron.getElementsByTagName('firstname')[0].childNodes[0].nodeValue;

			//remove children and replace
			var body = document.getElementById('loginTableBody');
			if (body.hasChildNodes())
			    while (body.childNodes.length >= 1)
			        body.removeChild(body.firstChild);

			var tr1 = document.createElement('tr');
				var td1 = document.createElement('td');
				td1.setAttribute('colspan', '2');
				td1.appendChild(document.createTextNode('Welcome ' + firstname));
				tr1.appendChild(td1);
			var tr2 = document.createElement('tr');
				var td2 = document.createElement('td');
					var div1 = document.createElement('div');
					div1.setAttribute('class', 'uiButton');
					div1.setAttribute('href', 'account-page.html');
					div1.setAttribute('style', 'width: 90px;');
					div1.appendChild(document.createTextNode('My Account'));
					td2.appendChild(div1);
				tr2.appendChild(td2);
				var td3 = document.createElement('td');
					var div2 = document.createElement('div');
					div2.setAttribute('class', 'uiButton');
					div2.setAttribute('onclick', 'doLogout()');
					div2.appendChild(document.createTextNode('Logout'));
					td3.appendChild(div2);
				tr2.appendChild(td3);
			body.appendChild(tr1);
			body.appendChild(tr2);
		} else {
			var code = getErrorCode(xml);
			var message = getErrorMessage(xml);
			
			if (code == -1)
				messageBox.value = message;
			else if (code == 80401)
				messageBox.value = message;
			else
				messageBox.value = 'Error ' + getErrorString(xml);
		}
	}

	function checkEnter (e) {
		var charCode;
		var browser = getBrowser();
		
		if (browser == 'moz')
			charCode = e.which;
		else {
			e = event;
			charCode = e.keyCode;
		}
		
		if (charCode == 13) {
			doLogin();
			return false;
		} else
			return true;
	}
	
	</script>
	
</head>
<body>

<table class="loginTable">
	<tbody id="loginTableBody">
		<c:set var="account" value="${param.account}"/>
		<c:choose>
			<c:when test="${! empty account}">
				<tr>
					<td colspan="2">Welcome <c:out value="${account.firstname}"/>></td>
				</tr>
				<tr>
					<td><div class="uiButton" href="account-page.html" style="width: 90px;">My Account</div></td>
					<td><div class="uiButton" onclick="doLogout()">Logout</div></td>
				</tr>
			</c:when>
			<c:otherwise>
				<tr>
					<td class="alignRight">Username</td>
					<td><input id="loginUsername" type="text" /></td>
				</tr>
				<tr>
					<td class="alignRight">Password</td>
					<td><input id="loginPassword" type="password" onkeypress="checkEnter(event)" /></td>
				</tr>
				<tr>
					<td colspan="2" class="alignRight"><div class="uiButton" onclick="doLogin()">Login</div></td>
				</tr>
				<tr>
					<td colspan="2">Not a member yet? <a href="#">Register</a></td>
				</tr>
			</c:otherwise>
		</c:choose>
	</tbody>
</table>
<p><input id="loginMessage" type="text" /></p>
</body>
</html>